<template>
  <el-button @click="emits('closeEvent')" v-if="showButtons.includes('cancel')">
    {{ multiLanguages("cancel") }}
  </el-button>
  <el-button :disabled="disabledCancel" @click="back" v-if="showButtons.includes('back')">
    {{ multiLanguages("previous") }}
  </el-button>
  <el-button type="primary" @click="next" v-if="showButtons.includes('next')">
    {{ multiLanguages("next") }}
  </el-button>
  <el-button type="primary" @click="confirm" v-if="showButtons.includes('confirm')" :loading="isLoading">
    {{ multiLanguages("ok") }}
  </el-button>
</template>
<script setup lang="ts">
import { ref } from "vue";
const props = withDefaults(
  defineProps<{
    multiLanguages: any;
    showButtons: string[];
    steps?: number;
  }>(),
  {
    steps: 3,
  }
);
const emits = defineEmits(["closeEvent", "confirmEvent", "back", "next", "update:showButtons"]);
const disabledCancel = ref(true);
const isLoading = ref(false);
const activeStep = ref(1);
/**点击上一步 */
const back = () => {
  if (activeStep.value > 1) {
    activeStep.value--;
    emits("back");
    if (props.showButtons.includes("confirm")) {
      emits("update:showButtons", [...props.showButtons.filter(item => item !== "confirm"), "next"]);
    }
  }
  if (activeStep.value === 1) {
    disabledCancel.value = true;
  }
};
/**点击下一步 */
const next = () => {
  activeStep.value++;
  emits("next")
  if (activeStep.value !== 1) {
    disabledCancel.value = false;
  }
  if (activeStep.value === props.steps) {
    emits("update:showButtons", [...props.showButtons.filter(item => item !== "next"), "confirm"]);
  }
};
/**点击确定 */
const confirm = () => {
  isLoading.value = true;
  emits("confirmEvent");
  isLoading.value = false;
};
</script>
<style scoped lang="less"></style>
